<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>集合时间推算</title>

    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=RsZRNlm0plnL3vPGdtQGDcSTQIvAHVuC"></script>
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        h1 {
            font-size: 16px;
            padding: 2px;
            margin: 2px;
            font-weight: normal;
        }

        h3 {
            font-size: 12px;
            padding: 0px;
            margin: 0px;
            font-weight: normal;
        }


        #t2 {
            font-size: 14px;
        }


        #t3 {
            font-size: 12px;
        }

        #result {
            height: 80px;
            width: 100%;
        }

        #l-map {
            height: 70%;
            width: 100%;
        }


        .d {
            display: inline-block;
            width: 320px;
            height: 145px;
        }

        #box {
            height: 150px;
        }
    </style>
</head>

<body>

    <div id="result">
        <h1 id="t0"></h1>
        <h1 id="t1"></h1>
        <h1 id="t2"></h1>
        <h1 id="t3"></h1>
    </div>

    <div id="box">
        <div class="d" id="d0">

        </div>
        <div class="d" id="d1">

        </div>
        <div class="d" id="d2">

        </div>
    </div>


    <div id="l-map"></div>

    <script type="text/javascript">

        var data = [
            ["孙齐逊", 106.481175, 29.5974, ""],
            ["范盛杰", 106.557298, 29.59139, ""],
            ["朱俊", 106.58543, 29.619334, ""],
            ["程竣麟", 106.464184, 29.545201, ""],
            ["李文睿", 106.526461, 29.580791, ""],
            ["李作舟", 106.401602, 29.805466, ""],
            ["李萧羽", 106.488927, 29.601685, ""],
            ["张林翰", 106.315617, 29.60605, ""],
            ["杨镇铨", 106.568309, 29.478656, ""],
            ["曹黎", 106.536821, 29.496584, ""],
            ["丁阳", 106.498259, 29.592212, ""],
            ["罗佳", 106.299932, 29.614488, ""],
            ["王明胜", 106.55951, 29.600322, ""],
            ["于殿文", 106.529585, 29.544726, ""],
            ["张萌莹", 106.6606, 29.507374, ""],
            ["梁岚", 106.590059, 29.560672, ""],
            ["黄科", 106.497882, 29.513713, ""],
            ["邵睿", 106.65872, 29.501733, ""],
            ["胡南", 106.553996, 29.554271, ""],
            ["唐茂文", 106.588056, 29.54096, ""],
        ];



        var map = new BMap.Map("l-map");
        map.centerAndZoom(new BMap.Point(106.531115, 29.553316), 13);
        map.enableScrollWheelZoom();

        var opts = {
            width: 160,     // 信息窗口宽度
            height: 30,     // 信息窗口高度
            enableMessage: true,//设置允许信息窗发送短息
        }
        var infoWindow = new BMap.InfoWindow("ddddddddddddddd", opts);

        var transitList = [];
        var callList = [];
        var markerCallList = [];
        var textList = [];
        var planList = [];
        var transferList = [];

        var targetMarker;
        var doneCount = data.length;

        var roleh = "roleh";
        for (var i = 0; i < data.length; i++) {

            var info = data[i];
            var roleMaker = new BMap.Marker(new BMap.Point(info[1], info[2]));
            var icon = new BMap.Icon(data[i][3], new BMap.Size(30, 30));
            roleMaker.setIcon(icon);
            roleMaker.disableMassClear();
            roleMaker.setTitle(data[i][0]);
            roleMaker.type = roleh;
            roleMaker.setLabel("333");
            console.log(icon)
            map.addOverlay(roleMaker);

            var dIdx = i % 3;
            var newEle = document.createElement("h3");
            newEle.onclick = function () {
                setLastMouseOver(this);
            }
            textList.push(newEle);

            var element = document.getElementById("d" + dIdx);
            element.appendChild(newEle);

            // function onLinesSet(lines ,  routes) {
            //     for (var i = 0; i < lines.length - 1; i++) {
            //         var polyline = lines[i].getPolyline(); //获取线条遮挡物
            //         polyline.setStrokeColor("#5298fe");
            //     }

            //     for (var i = 0; i < routes.length - 1; i++) {
            //         var polyline = routes[i].getPolyline(); //获取线条遮挡物
            //         polyline.setStrokeColor("#5298fe");
            //     }
            // }

            function onMarkers(pois, transfers) {
                for (var i = 0; i < pois.length; i++) {
                    map.removeOverlay(pois[i].marker);
                }
                targetMarker = pois[pois.length - 1].marker;

                for (var i = 0; i < transfers.length; i++) {
                    map.removeOverlay(transfers[i].marker);
                }
                var idx = markerCallList.indexOf(onMarkers);
                transferList[idx] = transfers;
            }

            markerCallList.push(onMarkers);

            function serachDone(result) {
                doneCount++;
                console.log(doneCount);
                var plan = result.getPlan(0);
                var des = plan.getDuration(true);
                var idx = callList.indexOf(serachDone);
                var info = data[idx];

                var p = textList[idx];

                planList[idx] = plan;
                //他们用时多久
                var bg = 0;
                var fs = 0;
                for (var i = 0; i < plan.getNumRoutes(); i++) {
                    bg += plan.getRoute(i).bg;
                }

                for (var i = 0; i < plan.getNumLines(); i++) {
                    fs += plan.getLine(i).wS;
                    console.log("line:");
                    console.log(plan.getLine(i));
                }


                p.innerHTML = info[0] + ": <font color='red'>" + des + "</font>   " + "步行约<font color='red'>" + bg + "</font>米,换乘<font color='red'>" + plan.getNumLines() + "</font>次,乘坐<font color='red'>" + fs + "</font>站";

                console.log(plan.getDescription(false));

                if (doneCount == data.length) {
                    allDone();
                }
            }
            callList.push(serachDone);


            var transit = new BMap.TransitRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: false

                },
                policy: BMAP_TRANSIT_POLICY_LEAST_TIME,
                onSearchComplete: callList[i],
                pageCapacity: 1,
                onMarkersSet: markerCallList[i],
                // onPolylinesSet: onLinesSet,
            });
            transitList.push(transit);
        }


        var lastElm;
        function setLastMouseOver(elm) {
            if (lastElm != elm) {
                lastElm = elm;
                highlight(textList.indexOf(lastElm));
            }
        }

        function allDone() {
            map.addOverlay(targetMarker);
        }

        function highlight(idx) {
            if (doneCount < data.length) {
                return;
            }

            var info = data[idx];

            var point = new BMap.Point(info[1],info[2]);

            // infoWindow.setTitle(info[0]);
            infoWindow.setContent(textList[idx].innerHTML);


            map.clearOverlays();
            map.openInfoWindow(infoWindow,point); //开启信息窗口

            console.log("highlight");

            // for (var j = 0; j < planList.length; j++) {
            //     var plan = planList[j];
            //     if (j != idx) {
            //         for (var i = 0; i < plan.getNumRoutes(); i++) {
            //             var line = plan.getRoute(i).getPolyline();
            //             // line.setStrokeOpacity(alpha1);
            //             // map.addOverlay(line);
            //         }
            //         for (var i = 0; i < plan.getNumLines(); i++) {

            //             var line = plan.getLine(i).getPolyline();
            //             // line.setStrokeOpacity(alpha1);
            //             // map.addOverlay(line);
            //         }

            //     }
            // }

            map.addOverlay(targetMarker);
            var plan = planList[idx];
            for (var i = 0; i < plan.getNumRoutes(); i++) {
                var line = plan.getRoute(i).getPolyline();
                map.addOverlay(line);
            }
            for (var i = 0; i < plan.getNumLines(); i++) {
                var lData = plan.getLine(i);
                var line = plan.getLine(i).getPolyline();
                map.addOverlay(line);
            }

            var transfer = transferList[idx];
            for (var i = 0; i < transfer.length; i++) {
                map.addOverlay(transfer[i].marker);
            }


        }



        var geoc = new BMap.Geocoder();

        map.addEventListener("click", function (e) {
            //点击覆盖物
            if (e.overlay && e.overlay.type == roleh) {
                var rolename = e.overlay.getTitle();
                for (var i = 0; i < data.length; i++) {
                    var info = data[i];
                    if (rolename == info[0]) {
                        highlight(i);
                        break;
                    }
                }
                return;
            }
            var pt = e.point;
            setTargetPoint(e.point);
            lastElm = null;
        });


        var start;
        var end = new BMap.Point(106.588648, 29.563434);
        setTargetPoint(end);

        function setTargetPoint(p) {
            end = p;
            geoc.getLocation(p, function (rs) {
                var str = '';
                var addComp = rs.addressComponents;
                if (rs.surroundingPois.length > 0) {
                    for (var i = 0; i < rs.surroundingPois.length; i++) {
                        str += rs.surroundingPois[i].title;
                        if (i < rs.surroundingPois.length - 1) {
                            str += ",";
                        }
                    }
                }

                //名称(可能没有)
                document.getElementById("t0").innerHTML = str;
                //详细地址
                document.getElementById("t1").innerHTML = rs.address;
                //附近商圈
                document.getElementById("t2").innerHTML = rs.business;
                console.log(rs);
            });
            find();
        }

        function find() {
            if (doneCount < data.length) {
                return;
            }
            // map.clearOverlays();
            targetMarker = null;
            doneCount = 0;
            planList = [];
            for (var i = 0; i < data.length; i++) {
                var info = data[i];
                start = new BMap.Point(info[1], info[2]);
                var transit = transitList[i];
                transit.search(start, end);
            }

        }




    </script>

    </html>